<template>
    <input type="text" v-model="name">
    {{name}}
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name : "Demo",
        setup(){
            // 自定义函数
            function myRef(value){
                let timer
                // 使用自定义ref来包裹
                return customRef((tracker,trigger)=>{
                    return {
                        get(){
                            // 通知vue追踪返回的数据的变化
                            tracker()
                            return value
                        },
                        set(newValue){
                            value = newValue
                            // 网页刷新防抖
                            clearTimeout(timer)
                            timer = setTimeout(() => {
                                // 通知vue重新解析模板
                                trigger()
                            }, 1000);
                        },
                    }
                })
            }
            // let name = ref("hello")
            // 使用自定义ref来包裹
            let name = myRef("hello")
            
            return {
                name
            }
        },
    }
</script>

<style scoped>

</style>